<template>
  <view class="cart-container">
    <!-- 顶部蓝色区域 -->
    <view class="cart-header">
      <text class="cart-title">购物车</text>
    </view>
    
    <!-- 商品列表滚动区域 -->
    <scroll-view class="cart-scroll" scroll-y="true">
      <view class="cart-item" v-for="(item, index) in cartList" :key="index">
        <view class="item-check">
            <checkbox :checked="item.checked" @click="toggleItemCheck(index)" />
        </view>
        <image class="item-img" :src="item.image" mode="aspectFill"></image>
        <view class="item-info">
          <view class="item-name">{{ item.name }}</view>
          <view class="item-price-count">
            <text class="item-price">¥{{ item.price.toFixed(2) }}</text>
            <view class="item-count">
              <button class="count-btn" @click="minus(index)">-</button>
              <view class="count-text">{{ item.count }}</view>
              <button class="count-btn" @click="plus(index)">+</button>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="cart-footer">
      <view class="footer-check">
        <checkbox :checked="isAllChecked" @click="toggleAllCheck" />
        <text class="all-check-text">全选</text>
      </view>
      <view class="footer-total">
        <text class="total-text">合计: ¥{{ totalPrice.toFixed(2) }}</text>
      </view>
      <button class="footer-settle" @click="settle">结算</button>
    </view>

    <tabBar></tabBar>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 购物车商品列表数据，实际可从接口获取，这里模拟数据
      cartList: [
        {
          id: 1,
          name: "少儿绘画",
          price: 1680,
          count: 1,
          image: "/static/1.png", // 实际图片路径，可替换
          checked: false
        },
        {
          id: 2,
          name: "AI制图",
          price: 1680,
          count: 1,
          image: "/static/1.png",
          checked: false
        },
         {
          id: 3,
          name: "少儿绘画",
          price: 1680,
          count: 1,
          image: "/static/1.png", // 实际图片路径，可替换
          checked: false
        },
        {
          id: 4,
          name: "AI制图",
          price: 1680,
          count: 1,
          image: "/static/1.png",
          checked: false
        },
         {
          id: 5,
          name: "少儿绘画",
          price: 1680,
          count: 1,
          image: "/static/1.png", // 实际图片路径，可替换
          checked: false
        },
        {
          id: 6,
          name: "AI制图",
          price: 1680,
          count: 1,
          image: "/static/1.png",
          checked: false
        },
         {
          id: 7,
          name: "少儿绘画",
          price: 1680,
          count: 1,
          image: "/static/1.png", // 实际图片路径，可替换
          checked: false
        },
        {
          id: 8,
          name: "AI制图",
          price: 1680,
          count: 1,
          image: "/static/1.png",
          checked: false
        },
         {
          id: 9,
          name: "少儿绘画",
          price: 1680,
          count: 1,
          image: "/static/1.png", // 实际图片路径，可替换
          checked: false
        },
        {
          id: 10,
          name: "AI制图",
          price: 1680,
          count: 1,
          image: "/static/1.png",
          checked: false
        },
        {
          id: 11,
          name: "AI制图",
          price: 1680,
          count: 1,
          image: "/static/1.png",
          checked: true
        },
        {
          id: 12,
          name: "水墨画",
          price: 1680,
          count: 1,
          image: "/static/1.png",
          checked: true
        }
      ]
    };
  },
  computed: {
    // 判断是否全选
    isAllChecked() {
      return this.cartList.every((item) => item.checked);
    },
    // 计算合计价格
    totalPrice() {
      return this.cartList.reduce((sum, item) => {
        if (item.checked) {
          return sum + item.price * item.count;
        }
        return sum;
      }, 0);
    }
  },
  methods: {
    // 切换单个商品选中状态
    toggleItemCheck(index) {
     
      console.log(index,"zzzz")
      console.log(this.cartList[index].checked,"zzzz")
      console.log(!this.cartList[index].checked,"zzzz")
      this.cartList[index].checked = !this.cartList[index].checked;
    },
    
    // 切换全选状态
    toggleAllCheck() {
      const newCheckedState = !this.isAllChecked;
      this.cartList.forEach(item => {
        item.checked = newCheckedState;
      });
    },
    
    // 减少商品数量
    minus(index) {
      if (this.cartList[index].count > 1) {
        this.cartList[index].count--;
      }
    },
    // 增加商品数量
    plus(index) {
      this.cartList[index].count++;
    },
    // 结算操作，实际可调用接口提交订单等
    settle() {
      const checkedGoods = this.cartList.filter((item) => item.checked);
      if (checkedGoods.length === 0) {
        uni.showToast({
          title: "请选择要结算的商品",
          icon: "none"
        });
        return;
      }
      console.log(checkedGoods)
      // 这里可继续完善，比如跳转订单确认页、调用提交订单接口等
      uni.showToast({
        title: "结算成功（模拟）",
        icon: "success"
      });
    }
  }
};
</script>

<style scoped>
.cart-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, #2C57F6 14%, #ffffff 14%);
}

.cart-header {
  height: 7.67vh;
  display: flex;
  align-items: flex-start;
  padding-left: 20px;
  padding-top: 20px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.cart-title {
  color: #ffffff;
  font-size: 28px;
  font-weight: bold;
  font-style: italic;
}

.cart-scroll {
  flex: 1;
  padding: 10px 10px 10px 10px;
  margin-top: -10px;
  padding-top: 80px;
  padding-bottom: 180px;
}

.cart-item {
  display: flex;
  align-items: center;
  width: 375px;
  margin-bottom: 10px;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* 边框颜色 */
  border: 1px solid #afa8a88f;
}

.item-check {
  width: 40px;
}

.item-img {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  margin-right: 15px;
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 80px;
}

.item-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.item-price-count {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.item-price {
  color: #f00;
  font-size: 16px;
  font-weight: bold;
}

.item-count {
  display: flex;
  align-items: center;
}

.count-btn {
  width: 30px;
  height: 30px;
  line-height: 30px;
  padding: 0;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: #f8f8f8;
  font-size: 16px;
  color: #333;
}

.count-text {
  margin: 0 8px;
  font-size: 16px;
  min-width: 30px;
  text-align: center;
}

.cart-footer {
  position: fixed;
  height: 7.67vh;
  bottom: 90px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background-color: #ffffff;
  border-top: 1px solid #eee;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.footer-check {
  display: flex;
  align-items: center;
}

.all-check-text {
  margin-left: 8px;
  font-size: 16px;
  color: #333;
}

.footer-total {
  font-size: 16px;

}

.total-text {
  margin-left: 30px;
  color: #333;
  font-weight: bold;
  font-size: 20px;
}

.footer-settle {
  background-color: #007AFF;
  color: #fff;
  padding: 4px 25px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  margin-left: 30px;
}
</style>